<script setup lang='ts'>
import { ref } from 'vue';
const showModal = ref(false);

// 打开弹窗
const openModal = () => {
    showModal.value = true;
    const html = document.querySelector('html');
    const body = document.querySelector('body');
    html.style.overflow = 'hidden';
    body.style.overflow = 'hidden';
};

// 关闭弹窗
const closeModal = () => {
    showModal.value = false;
    const html = document.querySelector('html');
    const body = document.querySelector('body');
    html.style.overflow = 'auto';
    body.style.overflow = 'auto';
};

defineExpose({
    openModal,
    closeModal
});
</script>

<template>
    <div class="popup" v-if="showModal">
        <div class="popup-content">
            <img src="@/assets/编组 2@3x.png" alt="popup" class="popup-img">
            <div class="popup-content-title">您有10次机会给您喜欢的品牌点赞哦！</div>
            <div class="popup-content-description">文案说明文案说明文案说明文案说明文案说明文案说明</div>
            <div class="popup-content-btn" @click="closeModal">去点赞</div>
            <img src="@/assets/icon-弹窗关闭@3x.png" alt="popup" class="popup-img-close" @click="closeModal">
        </div>

    </div>
    <div class="modal" v-if="showModal"></div>
</template>

<style scoped>
.popup {
    position: fixed;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    height: 452px;
    background-image: linear-gradient(180deg, #FFD3D3 0%, #FFF7F7 100%);
    border: 1px solid #FFFFFF;
    border-radius: 36px;
    border-radius: 36px;
    z-index: 20;
}



.popup-content {

    .popup-img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 239px;
        height: 149px;
        z-index: 20;
    }

    .popup-content-title {
        margin: 27px 54px;
        font-family: PingFangSC-Semibold;
        font-size: 34px;
        color: #262626;
        text-align: center;
    }

    .popup-content-description {
        margin: 27px 60px 41px 48px;
        opacity: 0.6;
        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #E03742;
        letter-spacing: 0;
        text-align: center;
    }

    .popup-content-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 46px;
        width: 468px;
        height: 84px;
        background-image: linear-gradient(0deg, #FA1F42 0%, #FFAE8B 100%);
        border-radius: 40px;
        border-radius: 40px;
        font-family: PingFangSC-Semibold;
        font-size: 32px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
    }

    .popup-img-close {
        position: absolute;
        bottom: -50%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 60px;
        height: 60px;
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}
</style>
